<template>
  <div class="aui-wrapper aui-page__login">
    <div class="aui-content__wrapper">
      <main class="aui-content">
        <div class="login-header">
          <h2 class="login-brand">{{ $t("brand.lg") }}</h2>
        </div>
        <div class="login-body">
          <h3 class="login-title">重置密码</h3>
          <!-- <div class="tip">验证码已通过手机号发送至 1875511</div> -->
          <el-form :model="dataForm" :rules="dataRule" ref="dataForm">
            <template v-if="isStep == 1">
              <el-form-item prop="mobile">
                <el-input
                  v-model="dataForm.mobile"
                  type="text"
                  placeholder="请输入手机号"
                >
                  <span slot="prefix" class="el-input__icon">
                    <svg class="icon-svg" aria-hidden="true">
                      <use xlink:href="#icon-mobile"></use>
                    </svg>
                  </span>
                </el-input>
              </el-form-item>
              <el-form-item prop="code" style="text-align: left">
                <el-input
                  v-model="dataForm.code"
                  type="text"
                  placeholder="请输入6位数验证码"
                  style="width: 68%"
                >
                </el-input>
                <span class="second" v-if="!showMis" @click="getcode()"
                  >获取验证码</span
                >
                <span class="second" v-else style="background: #999"
                  >重新发送{{ second }}S</span
                >
              </el-form-item>
            </template>
            <template v-if="isStep == 2">
              <el-form-item prop="newPassword">
                <el-input
                  :placeholder="$t('updatePassword.newPasswordTip')"
                  v-model="dataForm.newPassword"
                  show-password
                ></el-input>
              </el-form-item>
              <el-form-item prop="confirmPassword">
                <el-input
                  placeholder="请再次输入确认新密码"
                  v-model="dataForm.confirmPassword"
                  show-password
                ></el-input>
              </el-form-item>
            </template>
            <template v-if="isStep == 3">
              <div class="img">
                <img src="~@/assets/img/changSuccess.png" />
              </div>
              <div class="tip2">您已成功设置密码，请试用新密码登录</div>
            </template>
            <el-form-item>
              <el-button
                style="background: #128eff; margin-top: 68px"
                type="primary"
                class="w-percent-100"
                v-if="isStep == 1"
                @click="nextStep()"
                >下一步</el-button
              >
              <el-button
                v-if="isStep == 2"
                style="background: #128eff; margin-top: 68px"
                type="primary"
                class="w-percent-100"
                @click="dataFormSubmitHandle()"
                >确认修改</el-button
              >
              <el-button
                v-if="isStep == 3"
                style="background: #128eff"
                type="primary"
                class="w-percent-100"
                @click="back()"
                >马上登录</el-button
              >
            </el-form-item>
            <div
              style="text-align: center; margin-top: 18px"
              v-if="isStep != 3"
            >
              <span class="forgetPwd" @click="back()">返回</span>
            </div>
          </el-form>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
var time;
import debounce from "lodash/debounce";
import { messages } from "@/i18n";
import { isMobile } from "@/utils/validate";
export default {
  data() {
    return {
      dataForm: {
        code: "",
        confirmPassword: "",
        mobile: "",
        newPassword: "",
      },
      showMis: false,
      send: false,
      isStep: 1,
      second: 60,
    };
  },
  computed: {
    dataRule() {
      var validatePassword = (rule, value, callback) => {
        if (!/^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[@#$%^&+=]).{8,}$/.test(value)) {
          return callback(new Error(this.$t('updatePassword.newPasswordTip')))
        }
        callback()
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.dataForm.newPassword) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        mobile: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        newPassword: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
          { validator: validatePassword, trigger: "blur" }
        ],
        confirmPassword: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
          { validator: validatePass2, trigger: "blur" },
        ],
        code: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "change",
          },
        ],
      };
    },
  },
  created() {},
  destroyed() {
    clearInterval(time);
  },
  methods: {
    getcode() {
      if (!this.send) {
        this.send = false;
      } else {
        return;
      }
      if (!isMobile(this.dataForm.mobile)) {
        return this.$message.error("手机号格式不正确");
      }
      this.$http
        .get("/sys/user/sendCodeByPhone", {
          params: {
            mobile: this.dataForm.mobile,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.dataForm.code = res.data.data;
            this.showMis = true;
            this.secondmis();
          } else {
            return this.$message.error(res.data.msg);
          }
        });
    },
    //下一步
    nextStep() {
      if (this.dataForm.mobile == "") {
        return this.$message.error("请填写手机号");
      }
      if (this.dataForm.code == "") {
        return this.$message.error("请填写验证码");
      }
      this.$http
        .get("/sys/user/checkCode", {
          params: {
            code: this.dataForm.code,
            mobile: this.dataForm.mobile,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.isStep = 2;
          } else {
            return this.$message.error(res.data.msg);
          }
        });
    },
    back() {
      this.$router.back();
    },
    secondmis() {
      time = setInterval(() => {
        if (this.second > 0) {
          this.second--;
        } else {
          clearInterval(time);
        }
        if (this.second == 0) {
          this.send = false;
          this.showMis = false;
        }
      }, 1000);
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.$http
            .put("/sys/user/updateUserPassword", {
              ...this.dataForm,
            })
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.isStep = 3;
            })
            .catch(() => {});
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style lang="scss" scoped>
.aui-page__login {
  background: url("../../assets/img/loginBg.png");
  background-size: cover;
}
.login-title {
  margin: 15px 0 36px;
}
.login-body {
  height: 408px;
}
.forgetPwd {
  color: #128eff;
  font-size: 14px;
}
.tip {
  margin-bottom: 40px;
  color: #777;
  font-size: 14px;
}
.second {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 114px;
  height: 40px;
  background: #128eff;
  border-radius: 4px;
  color: #fff;
  text-align: center;
}
.img {
  margin: 34px 0 0;
  img {
    width: 56px;
    height: 56px;
  }
}
.tip2 {
  color: #333;
  font-size: 14px;
  margin: 12px 0 37px;
}
</style>
